<template>
  <div class="shareData-box">
    <div class="tabs">
      <!-- <div class="tab-container">
        <van-tabs
          v-model="activeIndex"
          color="#007AE6"
          title-active-color='#007AE6'
          :line-width="20"
          sticky
          animated
        >
          <van-tab
            v-for="item in tabs"
            :key="item.index"
            :title="item.label"
          ></van-tab>
        </van-tabs>
      </div> -->
      <div class="tab-box">
        <div
          class="tab-item"
          :key='0'
          v-if='activeIndex === 0'
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finished && !list.length ? '' : '没有更多了'"
            @load="onLoad"
          >
            <activity-track
              :type='type'
              v-for='(item,index) in list'
              :index='index'
              :key='index'
              :item='item'
            ></activity-track>
          </van-list>
        </div>
        <div
          class="tab-item"
          v-if='activeIndex === 1 && isShow'
          :key='1'
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finished && !list.length ? '' : '没有更多了'"
            @load="onLoad"
          >
            <thread
              v-for="(item,index) in list"
              :key='index'
              :index='index'
              :item="item"
            ></thread>
          </van-list>
        </div>
      </div>
    </div>
    <div
      class="no-data"
      v-if='!this.list.length && finished'
    >
      <img
        src="@/assets/img/dynamics/dynamicsNull.png"
        alt=""
      >
      <p>暂无{{type === 2 ? (activeIndex === 1 ? '文章访客' : '文章动态') : type === 1 ? (activeIndex === 1 ? '名片访客' : '名片动态') : (activeIndex === 1 ? '楼盘访客' : '楼盘动态')}}，快去分享吧~ </p>
    </div>
  </div>
</template>
<script>
import ActivityTrack from 'COMP/Dynamics/activityTrack'
import Thread from 'COMP/Dynamics/thread'
import dynamicsService from 'SERVICE/dynamicsService'
export default {
  data () {
    return {
      tabs: [
        { index: 0, label: '动态' },
        { index: 1, label: '访客' }
      ],
      isShow: true,
      list: [],
      clientIdList: [], //去重
      activeIndex: 0,
      current: 1,
      size: 10,
      loading: false,
      finished: false,
      type: 0, // 0 楼盘 1 名片 2 文章
      shareUuid: '', // 楼盘 或 文章 或 名名片 分享uuid
      startX: 0,
      moveX: 0,
      scrollTop: 0,
      total: 0,
      countObj: {},
      count: 0 // 二级页面传进来动态数
    }
  },
  created () {
    this.getQueryParams()
  },
  mounted () {
    // this.addTouchEvent()
  },
  watch: {
    // activeIndex (newActiveIndex, oldActiveIndex) {
    //   if (newActiveIndex !== oldActiveIndex) {
    //     this.list = []
    //     this.current = 1
    //     this.finished = false
    //     document.querySelector('.router-view').scrollTop = '0px'
    //   }
    // }
  },
  methods: {
    /**
     * 获取查询参数
     */
    getQueryParams () {
      this.type = parseInt(this.$route.query.type || 0)
      this.total = this.$route.query.total || 0
      if (sessionStorage.getItem('isSetCustomer')) {
        this.activeIndex = parseInt(sessionStorage.getItem('shareIndex'))
        // this.total = sessionStorage.getItem('threadTotal') || 0
        document.title = `访客(${this.total})`
        sessionStorage.removeItem('shareIndex')
        sessionStorage.removeItem('isSetCustomer')
      } else {
        this.getPosition()
      }
    },
    /**
     * tab切换
     */
    tabChange () {
      this.list = []
      this.current = 1
      this.finished = false
      document.querySelector('.router-view').scrollTop = '0px'
    },

    /**
     * 获取动态数量
     */
    async getActivityTrackCount () {
      try {
        this.countObj = await dynamicsService.getShareDynamicCountInfo()
        this.setTitle()
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * 设置title
     */
    setTitle () {
      switch (this.type) {
        case 0:
          document.title = `动态(${this.countObj.linkerShareDynamicCount || 0})`
          break;
        case 1:
          document.title = `动态(${this.countObj.cardShareDynamicCount || 0})`
          break;
        case 2:
          document.title = `动态(${this.countObj.articleShareDynamicCount || 0})`
          break;
      }
    },

    /**
     * 上拉加载
     */
    async onLoad () {
      try {
        let result = await (this.type === 2 ? (this.activeIndex ? dynamicsService.getAllStrangerDynamicList(this.current, this.size, 1, 3) : dynamicsService.getAllDynamicListByCustomer(this.current, this.size, 1, 3, this.shareUuid)) : this.type === 1 ? (this.activeIndex ? dynamicsService.getAllStrangerDynamicList(this.current, this.size, 1, 1) : dynamicsService.getAllDynamicListByCustomer(this.current, this.size, 1, 1, this.shareUuid)) : (this.activeIndex ? dynamicsService.getAllStrangerDynamicList(this.current, this.size, 1, 2) : dynamicsService.getAllDynamicListByCustomer(this.current, this.size, 1, 2, this.shareUuid)))
        if (this.current === 1) {
          this.list = result.records
          this.clientIdList = this.list.map(val => val.clientId)
        } else {
          let records = []
          result.records.forEach(val => !this.clientIdList.includes(val.clientId) && records.push(val))
          let clientIdList = records.map(val => val.clientId)
          this.list = [...this.list, ...records]
          this.clientIdList = [...this.clientIdList,...clientIdList]
        }
        if (this.current >= result.pages) {
          this.finished = true
        } else {
          this.current++
        }
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    /**
     * 添加触摸事件
     */
    addTouchEvent () {
      try {
        let slider = document.body
        slider.addEventListener('touchstart', (e) => {
          this.startX = e.touches[0].pageX
        })
        slider.addEventListener('touchmove', (e) => {
          let moveEndX = e.changedTouches[0].pageX
          this.moveX = moveEndX - this.startX
        })
        slider.addEventListener('touchend', (e) => {
          if (this.moveX < -100 && this.activeIndex === 1) {//左滑
            this.activeIndex = 0
            this.tabChange()
          }
          if (this.moveX > 100 && this.activeIndex === 0) {//右滑
            this.activeIndex = 1
            this.tabChange()
          }
          this.startX = 0
          this.moveX = 0
        })
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * 获取保存位置
     */
    getPosition () {
      try {
        let data = sessionStorage.getItem('threadList') || sessionStorage.getItem('activityTrackList')
        if (data) {
          let obj = JSON.parse(data)
          for (const key in obj) {
            this[key] = obj[key]
          }
          if (this.activeIndex) {
            document.title = `访客(${this.total || 0})`
          } else {
            if (this.shareUuid) {
              console.log(this.count)
              document.title = `动态(${this.count})`
            } else {
              this.setTitle()
            }
          }
          this.$nextTick(() => {
            this.$el.scrollTop = this.scrollTop
          })
          sessionStorage.removeItem(this.activeIndex ? 'threadList' : 'activityTrackList')
        } else {
          this.activeIndex = parseInt(this.$route.query.activeIndex || 0)
          // this.activeIndex && (this.total = sessionStorage.getItem('threadTotal') || this.$route.query.total || 0)
          this.shareUuid = this.$route.query.shareUuid || ''
          this.shareUuid && (this.count = this.$route.query.count)
          if (!this.activeIndex) { // 动态
            if (this.shareUuid) {
              document.title = `动态(${this.count})`
            } else {
              this.getActivityTrackCount()
            }
          } else { // 访客
            document.title = `访客(${this.total})`
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  components: {
    ActivityTrack,
    Thread
  },
  watch: {},
  beforeRouteLeave (to, from, next) {
    if (to.name === 'custom-detail' || to.name === 'message') {
      this.scrollTop = this.$el.scrollTop
      sessionStorage.setItem('threadTotal', this.total)
      sessionStorage.setItem(this.activeIndex ? 'threadList' : 'activityTrackList', JSON.stringify(this.$data))
    }
    if (to.name === 'dynamics') {
      sessionStorage.removeItem('threadTotal')
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.shareData-box {
  background: rgba(247, 249, 250, 1);
  position: relative;
  .van-list {
    background: rgba(247, 249, 250, 1);
  }
  .no-data {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    height: 17px;
    line-height: 17px;
    img {
      width: 88px;
      height: 88px;
    }
  }
  .van-tabs__line {
    bottom: 0.57rem;
    border-radius: 2px;
  }
  .scale-1px-bottom {
    position: relative;
    border: none;
  }
  .van-tabs__nav--line:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(207, 207, 217, 1);
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
</style>
